<template>
  <div class="charts" ref="box"></div>
</template>

<script>
// 0.引入echarts
import echarts from "echarts";

export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {};
      },
      required: true,
    },
  },
  mounted() {
    // 野鸡代码
    // setTimeout(() => {
    //   this.drawLineCharts(this.options);
    // }, 500);
    this.drawLineCharts(this.options);
  },
  methods: {
    drawLineCharts(options) {
      // 1.初始化图表
      // let myChart = echarts.init(document.querySelector(".charts"));
      let myChart = echarts.init(this.$refs.box);
      // console.log(this.$refs);
      console.log(myChart);

      let option = {
        title: {
          text: options.text,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: options.lengend,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: options.xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: options.series,
      };

      // 2.option
      // 3.生成设置
      myChart.setOption(option);
    },
  },
  watch: {
    options: {
      handler(newValue, oldValue) {
        this.drawLineCharts(newValue);
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
.charts {
  height: 700px;
  background: #fff;
  padding: 20px;
}
</style>